<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-06-17 13:48:46
 * @LastEditTime: 2019-09-01 21:54:04
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="main">
    <img style="width:100%;height:auto" class="bg" src="../assets/images/new_safetybanner.jpg" alt />
    <div class="xiong">
      <img src="../assets/images/xiong.png" alt />
    </div>
    <div class="start" :id="id">
      <router-link to="page1" class="start-button"></router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      mainHeight: "",
      id: "show"
    };
  },
  created() {
    window.setTimeout(() => {
      this.id = "shake";
    }, 4000);
  }
};
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  top: 0;
  right: 0;
  
}

.bg {
  opacity: 0;
  animation: fadeIn 1s both;
}
#show {
  animation: fadeIn 1s 2s both;
  opacity: 0;
}
#shake {
  animation: jackInTheBox 3s ease-out 0s infinite alternate-reverse;
}
.xiong {
  animation: fadeInLeft 1s 1s both;
  opacity: 0;
  position: absolute;
  top:0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
    align-items: center;
  width: 100%;
  height: 100%;
  align-content: center;
  justify-content: center;
  
  img {
    width: 2.49rem;
    height: 5.42rem;
  }
  //针对手机
  @media screen and (max-width: 768px) {
    img {
      width: 1.25rem;
      height: 2.7rem;
    }
  }
}

.start {
  position: fixed;
  bottom: 0.5rem;
  width: 100%;
  .start-button {
    width: 1.85rem;
    height: 0.65rem;
    background: url('../assets/images/startBtn.png') center center no-repeat;
    background-size: 100% 100%;
    border-radius: 20px;
    
    font-size: 0.18rem;
    display: block;
    text-align: center;
    line-height: 0.65rem;
    margin: 0 auto;
  }
}
</style>
